<template>
    <view class="ping_card" :class="`ping_card_${type}`" @click="openPing('all',info)">
        <pub-image class="img" :src="info.coverImg" />
        <div class="text">
            <div class="company" v-if="info.produceBy&&isBig">{{ info.produceBy }}</div>
            <div class="name">{{ info.goodsName }}</div>
            <div class="gxz" v-if="info.contribution&&isBig">
                <span class="span_1">贡献值奖励</span>
                <span class="span_2">{{ info.contribution }}</span>
            </div>
            <div class="jindu">
                <div class="pro">
                    <div class="pro_has" :style="{width:`${info.pro}%`}"></div>
                </div>
            </div>
            <div class="inventory" v-if="isBig">仅剩{{info.stock}}件</div>
            <div class="price">
                <span class="span_1" v-if="isBig">拼团价</span>
                <span class="span_2">￥</span>
                <span class="span_3">{{info.sellPrice}}</span>
                <span class="span_4">￥{{info.price}}</span>
            </div>
            <div class="btn" v-if="isBig" @click="openPing('btn',info)">参与拼团</div>
        </div>
    </view>
</template>

<script>
export default {
    props: {
        info: {
            type: Object,
            default: {},
        },
        type: {
            type: String,
            default: 'big'
        }
    },
    data() {
        return {};
    },
    computed: {
        isBig() {
            return this.type === 'big';
        }
    },
    mounted() { },
    methods: {
        openPing(type, info) {
            if (type === 'all' && this.isBig) return
            this.$emit('openPing', info);
        },
    },
};
</script>

<style lang="scss" scoped>
.ping_card {
    width: 100%;
    background-color: #fff;
    border-radius: 10rpx;
    // margin: 0 0 24rpx 0;
    display: flex;
    padding: 30rpx 24rpx;
    border-bottom: 10rpx solid #fafafa;

    .img {
        width: 216rpx;
        height: 320rpx;
        border-radius: 8rpx;
        margin-right: 18rpx;
        overflow: hidden;
    }

    .text {
        width: calc(100% - 216rpx - 18rpx);
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;

        .company {
            height: 40rpx;
            line-height: 40rpx;
            background-color: rgba(218, 56, 56, 0.1);
            border-radius: 8rpx;
            font-size: 20rpx;
            color: #da3838;
            padding: 0 8rpx;
        }

        .name {
            width: 100%;
            line-height: 40rpx;
            color: #3d3d3d;
            font-size: 32rpx;
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 10rpx 0;
        }

        .gxz {
            width: 100%;
            height: 40rpx;
            line-height: 40rpx;
            color: #ff6a00;
            font-size: 26rpx;
            padding: 0 0 0 28rpx;
            background: url("@/static/bimg/img_25.png") left center no-repeat;
            background-size: 24rpx;
            margin: 0 0 10rpx 0;

            .span_2 {
                font-weight: 700;
                margin-left: 8rpx;
            }
        }

        .jindu {
            width: 260rpx;
            height: 24rpx;
            position: relative;

            .pro {
                width: 100%;
                height: 24rpx;
                background-color: #ffbfbe;
                border-radius: 12rpx;

                .pro_has {
                    width: 0%;
                    height: 24rpx;
                    border-radius: 12rpx;
                    background-image: linear-gradient(#f41a0b, #ffa100);
                }
            }
        }

        .inventory {
            width: calc(100% - 260rpx);
            color: rgba(51, 51, 51, 0.45);
            font-size: 20rpx;
            text-align: right;
            line-height: 24rpx;
            height: 24rpx;
        }

        .price {
            width: 100%;
            height: 48rpx;
            line-height: 48rpx;
            display: flex;
            align-items: baseline;
            color: #e62017;
            font-size: 24rpx;
            margin-top: 14rpx;

            .span_1 {
                height: 30rpx;
                line-height: 30rpx;
                margin-right: 8rpx;
            }

            .span_2 {
                height: 30rpx;
                line-height: 30rpx;
            }

            .span_3 {
                font-weight: 700;
                font-size: 44rpx;
            }

            .span_4 {
                font-size: 24rpx;
                color: rgba(51, 51, 51, 0.45);
                text-decoration: line-through;
                margin-left: 16rpx;
            }
        }

        .btn {
            width: 100%;
            height: 70rpx;
            background-image: linear-gradient(to right, #ec7045, #e94448);
            color: #fff;
            font-size: 24rpx;
            line-height: 70rpx;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8rpx;
            margin-top: 14rpx;

            .icon {
                width: 30rpx;
                height: 30rpx;
                background: url("@/static/aimg/img_7.png") center no-repeat;
                background-size: 30rpx;
                margin: -4rpx 10rpx 0 0;
            }
        }
    }
}
.ping_card_small {
    padding: 0;
    flex-wrap: wrap;
    border-bottom: unset;
    .img {
        width: 100%;
        height: 200rpx;
        margin-right: 0;
        border-top-left-radius: 24rpx;
        border-top-right-radius: 24rpx;
    }
    .text {
        width: 100%;
        .name {
            font-size: 20rpx;
            color: #3d3d3d;
        }
        .price {
            position: relative;
            .span_3 {
                font-size: 36rpx;
                transform: scaleX(0.8);
                transform-origin: 0 0;
            }
            .span_2{
                transform: scaleX(0.8);
                transform-origin: 0 0;
            }
            .span_4{
                transform: scaleX(0.8);
                transform-origin: 0 right;
                position: absolute;
                right: 0;
                top: 0;
            }
        }

        .jindu {
            padding: 0 0 0 14rpx;
        }
        .jindu::before {
            background: url("@/static/bimg/img_50.png") center no-repeat;
            background-size: auto 22rpx;
            width: 22rpx;
            height: 24rpx;
            content: "";
            position: absolute;
            left: 0;
            top: 0;
        }
    }
}
</style>
